export default {
  data() {
    return {
      selectionArea: {
        left: 0,
        top: 0,
        x: 0,
        y: 0,
        width: 0,
        height: 0,
      },
    }
  },
  methods: {
    handleWorkbenchMousedown(evt) {
      // const draggableArr = this.$refs.widgets;
      // for (let i = 0; i < draggableArr.length; i++) {
      //   this.$refs.widgets[i].$el.hidden = true
      // }
      this.selectionArea.x = evt.x
      this.selectionArea.y = evt.y
      this.selectionArea.left = evt.offsetX
      this.selectionArea.top = evt.offsetY
      this.$refs.workbench.addEventListener('mousemove', this.handleWorkbenchMousemove, false)
      this.$refs.workbench.addEventListener('mouseup', this.handleWorkbenchMouseup, false)
    },
    handleWorkbenchMousemove(evt) {
      this.selectionArea.width = evt.x - this.selectionArea.x
      this.selectionArea.height = evt.y - this.selectionArea.y
    },
    handleWorkbenchMouseup(evt) {
      this.$refs.workbench.removeEventListener('mousemove', this.handleWorkbenchMousemove)
      this.$refs.workbench.removeEventListener('mouseup', this.handleWorkbenchMouseup)
      // 搜寻范围内的组件
      // 重置范围选择框
      this.selectionArea = {
        x: 0,
        y: 0,
        width: 0,
        height: 0,
      }

      // const draggableArr = this.$refs.widgets;
      // for (let i = 0; i < draggableArr.length; i++) {
      //   this.$refs.widgets[i].$el.hidden = false
      // }
    },
  }
}
